window.onload = function () {
  let drumKit = document.querySelectorAll("#drum-kit .kit"),
    drumAudio = document.querySelectorAll(".audio-drum-box audio")

  document.onkeydown = function (e) {
    switch (e.keyCode) {
      case 65:
        kitDown(0)
        break;
      case 83:
        kitDown(1)
        break;
      case 68:
        kitDown(2)
        break;
      case 70:
        kitDown(3)
        break;
      case 71:
        kitDown(4)
        break;
      case 72:
        kitDown(5)
        break;
      case 74:
        kitDown(6)
        break;
      case 75:
        kitDown(7)
        break;
      case 76:
        kitDown(8)
        break;
      default:
        break;
    }
  }

  drumKit.forEach(key => {
    key.addEventListener("transitionend", removePlaying)
  })

  function removePlaying() {
    this.className = "kit"
  }

  function kitDown(idx) {
    drumKit[idx].className += " playing"
    drumAudio[idx].currentTime = 0 // 反复点击重头开始播放音频
    drumAudio[idx].play()
  }
}